<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h3>HTML Textarea Element</h3>
<form>
		<textarea rows="4" cols="50">
			At w3schools.com you will learn how to make a website.
	</textarea>
</form>
<hr>
<h3>HTML Label Element</h3>
<form>
    <input type="checkbox" id="vehicle1">
    <label for="vehicle1">I have a bike</label> <br>
    <input type="checkbox" id="vehicle2">
    <label for="vehicle2">I have a car</label> <br>

    <label>Male<input type="radio" name="gender" id="male"></label>
    <br>
    <label>Female<input type="radio" name="gender" id="female"></label>
    <br>
</form>
<hr>
<h3>HTML Fieldset Element</h3>
<form>
    <fieldset>
        <legend>Personalia:</legend>
        Name:<input type="text"><br>
        Email:<input type="text"><br>
        Date of birth:<input type="text">
    </fieldset>
    <fieldset>
        <legend>Personalia:</legend>
        Name:<input type="text"><br>
        Email:<input type="text"><br>
        Date of birth:<input type="text">
    </fieldset>
</form>
<hr>
<h3>HTML Select Element</h3>
<form>
    <select>
        <option></option>
        <option>Volvo</option>
        <option>Saab</option>
        <option>Opel</option>
        <option selected>Audi</option>
    </select>
    <br> <br>
    <select>
        <optgroup label="Swedish Cars">
            <option>Volvo</option>
            <option>Saab</option>
        </optgroup>
        <optgroup label="German Cars">
            <option>Mercedes</option>
            <option selected>Audi</option>
        </optgroup>
    </select>
</form>
<hr>
<h3>HTML Button Element</h3>
<form>
    <input type="text" value="BO"> <br>
    <input type="password"> <br>
    <select>
        <option></option>
        <option>Volvo</option>
        <option>Saab</option>
        <option>Opel</option>
        <option selected>Audi</option>
    </select>
    <br>
    <button type="reset">重置</button>
</form>

<hr>
<h3>HTML Datalist Element</h3>
<form>
    <input list="browsers">
    <datalist id="browsers">
        <option>Internet Explorer</option>
        <option>Firefox</option>
        <option>Chrome</option>
        <option>Opera</option>
        <option>Safari</option>
    </datalist>
</form>
<br>
<p>选择教学楼，输入教室编号。整合了下拉选择框与输入框</p>
<form>
    <input list="locations">
    <datalist id="locations">
        <option>丹青楼</option>
        <option>锦绣楼</option>
        <option>成栋楼</option>
    </datalist>
</form>
</body>
</html>